<template>
<div>
	<div id="main-top">
		<div id="main-top-left">
			<el-button type="primary" class="groundingo" @click="changeData">上架商品</el-button>
			<el-button type="primary" class="offtheshelf" @click="changeData">下架商品</el-button>
			<el-button type="primary" class="delete" @click="changeData">以删除商品</el-button>
		</div>
		<div id="main-top-right">
			<el-input
			  placeholder="请输入商品名"
			  clearable v-model="searchcontent">
			</el-input>
			<el-button type="primary" @click="search">点击搜索</el-button>
		</div>
		</div>
	  <el-table
	      :data="commDate"
	      border
	      style="width: 100%"
		  >
	      <el-table-column
	        prop="id"
	        label="id"
			width="108"
	        >
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="商品名称"
			width="160"
	        >
	      </el-table-column>
	      <el-table-column
	        prop="img"
	        label="商品图片"
			width="104"
	        >
			<template slot-scope="scope">
			　　　<img :src="scope.row.img" width="80" height="80" />
			</template>
	      </el-table-column>
	      <el-table-column
	        prop="datail"
	        label="商品详情"
			width="300"
	        >
	      </el-table-column>
		  <el-table-column
		    prop="type"
		    label="商品类型"
		  	width="100"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="price"
		    label="商品价格"
			width="100"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="quantity"
		    label="商品数量"
			width="100"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="state"
		    label="商品状态"
		  	width="100"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="createTime"
		    label="商品创建时间"
			width="200"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="updateTime"
		    label="上次修改时间"
			width="200"
		    >
		  </el-table-column>
	      <el-table-column
	        fixed="right"
	        label="操作"
			width="100"
	       >
	        <template slot-scope="scope" >
	          <el-button  type="text" size="small" @click="lookuser(scope.row)">查看</el-button>
	          <el-button type="text" size="small"  @click="edit(scope.row)">编辑</el-button>
	        </template>
	      </el-table-column>
	    </el-table>
		<!-- 分页功能 -->
		<el-pagination
		    background
		    @current-change="handleCurrentChange"
		    layout="prev, pager, next"
		    :page-count="total" style="text-align: right; margin-top: 16px;">
			<!-- page-count：总共多少页 -->
		</el-pagination>
		<!-- 对话框 -->
		<el-dialog
		  title="商品信息"
		  :visible.sync="dialogVisible" 
		   width="80%"
		  :before-close="handleClose" 
		  style="size: 16px; margin-left: 80px;"> <!-- before-close:右上角小叉叉 -->
		  <el-link :underline="false"><span style="font-size: 16px; color:#409EFF;margin-bottom: 8px;display: block;">用户ID:{{dialogLookData.id}}</span></el-link>
		  <!-- 点击查看对话框界面 -->
		  <el-descriptions class="margin-top"  :column="3"  border v-if="temp">
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-bangzhu"></i>
		          商品名称
		        </template>
		        {{dialogLookData.name}}
		      </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-picture-outline"></i>
			      商品图片
			    </template>
			    <img :src="dialogLookData.img" width="80" height="80" />
			  </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-s-order"></i>
		          商品详情
		        </template>
		         {{dialogLookData.datail}}
		      </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-collection"></i>
			      商品类型
			    </template>
			    {{dialogLookData.type}}
			  </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-aim"></i>
		          商品价格
		        </template>
		        {{dialogLookData.price}}
		      </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-medal"></i>
		          商品数量
		        </template>
		        {{dialogLookData.quantity}}
		      </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-news"></i>
			      商品状态
			    </template>
			    {{dialogLookData.state}}
			  </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-pie-chart"></i>
			      商品创建时间
			    </template>
			    {{dialogLookData.createTime}}
			  </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-timer"></i>
			      上次修改时间
			    </template>
			    {{dialogLookData.updateTime}}
			  </el-descriptions-item>
		    </el-descriptions>
		  <!-- 点击编辑对话框界面 -->
		  <el-descriptions class="margin-top" title="" :column="3"  border v-if="!temp">
		    <el-descriptions-item>
		    <template slot="label">
		        <i class="el-icon-bangzhu"></i>
		        商品名称
		    </template>
			<el-input
			  placeholder="请输入商品名称"
			  v-model="dialogLookData.name"
			  clearable>
			</el-input>
		    </el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-picture-outline"></i>
		  			商品图片
		  		</template>
		  		 <img :src="dialogLookData.img" width="80" height="80" @click="editimg"/>
		  		</el-descriptions-item>
		    <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-s-order"></i>
		          商品详情
		        </template>
		         <el-input
		           placeholder="请输入详情内容"
		           v-model="dialogLookData.datail"
		           clearable>
		         </el-input>
		    </el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-collection"></i>
		  			商品类型
		  		</template>
				<el-select v-model="dialogLookData.type"  placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
		  		</el-descriptions-item>
		    <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-aim"></i>
		          商品价格
		        </template>
				<el-input
				   placeholder="请输入商品价格"
				   v-model="dialogLookData.price"
				   clearable>
				 </el-input>
		      </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-medal"></i>
		          商品数量
		        </template>
				<el-input
				   placeholder="请输入商品价格"
				   v-model="dialogLookData.quantity"
				   clearable>
				 </el-input>
		      </el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-location-outline"></i>
		  			商品状态
		  		</template> 
				<el-radio-group v-model="dialogLookData.state">
				    <el-radio :label="0">正常</el-radio>
				    <el-radio :label="1">下架</el-radio>
				    <el-radio :label="2">删除</el-radio>
				  </el-radio-group>
		  		</el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-pie-chart"></i>
		  			商品创建时间
		  		</template>
		  		{{dialogLookData.createTime}}
		  		</el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-timer"></i>
		  			上次修改时间
		  		</template>
		  		{{dialogLookData.updateTime}}
		  		</el-descriptions-item>
		    </el-descriptions>
		  <span slot="footer" class="dialog-footer">
		  <el-button type="primary" @click="revise" v-if="!temp">点击修改</el-button>
		  </span>
		</el-dialog>
		<!-- 编辑图片点击修改图片的对话框 -->
		<el-dialog
		  title="修改图片"
		  :visible.sync="editimgchanger"
		  width="30%"
		  :before-close="handleClose">
		  <span style="color: #41c6b7;">原来的图片</span>
		  </br>
		  <img :src="editimgData" width="80px" height="80px"/>
		  <el-divider></el-divider>
		  <button type="button" id="fileimg">选择图片
		  	<input type="file" @change='editimgclick' ref="fileInput" />
		  </button>
		  </br>
		  <span style="color:#409EFF;">选择的的图片</span>
		  </br>
		  <img :src="editimgNowData" width="80px" height="80px" class="img2" v-if="editimgNowData"/>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="cancel">取 消</el-button>
		    <el-button type="primary" @click="editimgclick01">更改图片</el-button>
		  </span>
		</el-dialog>
		</div>
</template>

<script>
import  client  from '../fileupload/upload.js';
export default {
	   data() {
	     return {
	       commodityData:[],//所有商品数据的数组
			commDate:[], //渲染页面的数组
			total:0,
			searchcontent:"", //搜索框内容
			temp:true,
			dialogVisible:false,
			dialogLookData:{} ,//查看对话框数据
			editData:{},//编辑对话框数据，用于对话框点击关闭按钮，回滚数据
			editimgchanger:false, //控制编辑图片点击图片出现的对话框
			addCommodity:false,//控制添加商品对话框
			editimgData:'' ,//储存编辑图片原始图片
			editimgNowData:'',//上传后的图片
			options:[],//获取的商品类型数组
			nameshow:false,
			nameok:false,
	     }
	   },
		 created(){  //钩子函数，初始化渲染数据
			 // 获取商品数据
			 this.$axios({
			   url:'http://localhost:8081/commoditys',
			   method:'get',
			 }).then(res=>{
				 this.commodityData = res.data.date
				 if((res.data.date).length % 8 == 0){    //分页刚好够的情况
					 this.commDate = this.commodityData.slice(0,8)
					 this.total = (res.data.date).length / 8
				 }else{
					 this.commDate = this.commodityData.slice(0,8) //分页有多余的情况
					 this.total = parseInt((res.data.date).length / 8) + 1
				 }
			 })
		 },
		 methods:{
			 handleCurrentChange(currentindex){ //分页
				 this.commDate = this.commodityData.slice((currentindex-1)*8, currentindex*8)
				 console.log(currentindex);
			 },
			  // 点击查看数据
			 lookuser(val){
				 this.dialogVisible = true
				 this.temp = true //控制视图是否显示
				 this.dialogLookData = val
			 },
			 //点击编辑数据
			 edit(val){
				 this.dialogVisible = true
				 this.dialogLookData = val
				 this.editData = val// 保存编辑对话框初始化数据
				 sessionStorage.setItem("editData",JSON.stringify(this.editData))
				 this.temp = false
			 },
			 handleClose(done) {  //关闭对话框
				 if(this.temp == true){
				 // 对话框右上角叉号关闭
				 this.$confirm('确认关闭？')
				 	.then(_ => {
				 		done();
				 	})
				 	.catch(_ => {});
				 }else{
					 // 对话框右上角叉号关闭
					 this.$confirm('关闭编辑？')
					 	.then(_ => {
						this.editimgNowData = '' //关闭编辑后重置图片url
						  this.dialogLookData = Object.assign(this.dialogLookData,JSON.parse(sessionStorage.getItem("editData")))
							sessionStorage.removeItem("editData")//移除sessionStorage
							done();
					 	})
					 	.catch(_ => {});
				 }
				 
			},
			revise(){  //编辑修改按钮点击事件
				this.dialogVisible = false
				this.$axios({
				  url: 'http://localhost:8081/commoditys',
				  method:'put',
				  data:this.dialogLookData,
				}).then(res=>{
					if(res.data.code == 20041){
						this.$message({
						  message: '修改成功',
						  type: 'success',
						  center:true,
						  duration:1000
						});
						this.$router.go(0)
					}else{
						this.$message({
						  message: '修改失败',
						  type: 'error',
						  center:true,
						  duration:1000
						});
					}
				})
			},
			search(){
				var temp = false//点击搜索
				var a = {}
				for(var i = 0;i<this.commodityData.length;i++){
					if(this.commodityData[i].name == this.searchcontent){
						a = this.commodityData[i]
						temp = true
						break
					}
				}
				if(temp){
					this.dialogLookData = a
					this.editData = a// 保存编辑对话框初始化数据
					this.dialogVisible = true
					this.temp = false
				}else{
					this.$message({
						message: '没有查询到数据',
						type: 'warning',
						center:true,
						duration:1000
					})
				}
			},
			editimg(e){  //点击图片
				this.editimgchanger = true
				this.editimgData = e.target.src
			},
			editimgclick(e){ //选择图片
				const file = this.$refs.fileInput.files[0]
				const fileReader = new FileReader()
				var a = file.name.slice(file.name.length - 3,file.name.length)
				fileReader.onload = (temp) => {
					if(a == "jpg" || a == "png"){ //图片格式校验
				    this.editimgNowData = temp.target.result //获取上传的图片地址用于显示图片
					}else{
					this.$message({
						message: '只能选择png,或者jpg格式的图片',
						type: 'error',
						center:true,
						duration:1000
					})
				}	
				}
				fileReader.readAsDataURL(file)
			},
			editimgclick01(){  //点击修改图片按钮
				var data = this.$refs.fileInput.files[0]
				var url = ""
					for(var i = 0; i<this.options.length;i++){
						if(this.options[i].id == this.dialogLookData.type){ //比较当前商品类型和商品表里的id（实质就是判断主键，外键相当）
							url = this.options[i].name  //获取当前数据对象的类型，用与上传到阿里云oss指定分类
						}
					}
					client.put(
					url+"/"+this.$refs.fileInput.files[0].name,//$refs.fileInput.files[0].name图片文件名
					data,
					{
					  headers:{
					    "Content-Disposition":"inline",
					    "Content-Type":'image/jpg'
					  }
					}
					).then((result)=>{
					  if(result.url != null){
						this.dialogLookData.img = result.url
						  this.$message({
							  message: '更换图片成功！',
							  type: 'success',
							  center:true,
							  duration:1000
						  })
						  this.editimgchanger=false
						  this.editimgNowData = "" //置空
					  }else{
						  this.$message({
						  	  message: '修改失败！',
						  	  type: 'error',
						  	  center:true,
						  	  duration:1000
						  })
					  }
					});
			},
			cancel(){ //选择图片功能取消按钮
				this.editimgchanger = false
			},
			changeData(e){ //按钮点击事件
				var a = e.target.innerText
				var temp = []
				if(a == "上架商品"){
					for(var i = 0;i<this.commodityData.length;i++){
						if(this.commodityData[i].state == 0){
							temp.push(this.commodityData[i])
						}
					}
					if(temp.length % 8 == 0){    //分页刚好够的情况
						 this.commDate = temp.slice(0,8)
						 this.total = temp.length / 8
					}else{
						 this.commDate = temp.slice(0,8) //分页有多余的情况
						 this.total = parseInt(temp.length / 8) + 1
					}
				}else if(a == "下架商品"){
					for(var i = 0;i<this.commodityData.length;i++){
						if(this.commodityData[i].state == 1){
							temp.push(this.commodityData[i])
						}
					}
					if(temp.length % 8 == 0){    //分页刚好够的情况
						 this.commDate = temp.slice(0,8)
						 this.total = temp.length / 8
					}else{
						 this.commDate = temp.slice(0,8) //分页有多余的情况
						 this.total = parseInt(temp.length / 8) + 1
					}
				}else{
					this.$axios({
					  url:'http://localhost:8081/commoditys/delete',
					  method:'get',
					}).then(res=>{
						var a = res.data.date
						if(a % 8 == 0){    //分页刚好够的情况
							 this.commDate = a.slice(0,8)
							 this.total = a.length / 8
						}else{
							 this.commDate = a.slice(0,8) //分页有多余的情况
							 this.total = parseInt(a.length / 8) + 1
						}
					})
					
				}
			},
		 }
	 };
</script>

<style scoped>
	@import url('../../static/css/cygrounding.css');
</style>